{% extends "base.html" %}
{% block extra_head %}
    <script type="text/javascript" src="/static/js/jquery.lightbox-0.5.js"></script>
    <link rel="stylesheet" type="text/css" href="/static/css/jquery.lightbox-0.5.css" media="screen" />

    <style type="text/css">
        /* jQuery lightBox plugin - Gallery style */
        #gallery {
            background-color: #444;
            padding: 10px;
            width: 520px;
        }
        #gallery ul { list-style: none; }
        #gallery ul li { display: inline; }
        #gallery ul img {
            border: 5px solid #3e3e3e;
            border-width: 5px 5px 20px;
        }
        #gallery ul a:hover img {
            border: 5px solid #fff;
            border-width: 5px 5px 20px;
            color: #fff;
        }
        #gallery ul a:hover { color: #fff; }
    </style>

    <script type="text/javascript">
        function init_lightbox() {
        {% for item in datalist %}
        $('#entry_img_{{ item.id }} a').lightBox({
            imageLoading:           '/static/images/lightbox-ico-loading.gif',      // (string) Path and the name of the loading icon
            imageBtnPrev:           '/static/images/lightbox-btn-prev.gif',         // (string) Path and the name of the prev button image
            imageBtnNext:           '/static/images/lightbox-btn-next.gif',         // (string) Path and the name of the next button image
            imageBtnClose:          '/static/images/lightbox-btn-close.gif',        // (string) Path and the name of the close btn
            imageBlank:             '/static/images/lightbox-blank.gif'            // (string) Path and the name of a blank image (one pixel)
        });
        {% endfor %}
        }

        function post_up(entry_id)
        {
            myid = "#up_num_"+entry_id;
            if ($(myid).attr("uped") == 1)
            {
                alert("您已经赞过了哦，把机会留给别的图片吧~~");
                return;
            }


            url = '/ajax/entry/up/' + entry_id;
            $.post(url, {}, function(data){
                   up_num = Number($(myid).html());
                   up_num += 1;
                   $(myid).html(up_num);
                   $(myid).attr("uped", 1)
                   },'json')
        }

        function async_download_imgs()
        {
            $("div.async_div").each(function(){
                img_url = $(this).attr('img_url');
                $('<a/>').attr('href', img_url).append($('<img />').attr('src', img_url)).appendTo($(this));
                //$('<img />').attr('src', img_url).appendTo($(this));

            })
        }

        $(document).ready(function(){
            async_download_imgs();
            init_lightbox();
        });
    </script>
{% endblock %}
{% block content %}
    <div id="mid" class="index">

    <!-- Start slider -->
    <div class="stripViewer">
        <div class="panelContainer">

            {% for item in datalist %}
            <div class="panel" id="post-{{ item.id }}" title="">
                <!--<div class="wrapper" align="center" style="width:940px;height:600px; overflow:scroll; border:1px solid;">-->
                    <!--关掉滚动-->
                    <div class="wrapper" align="center" >
                        <div id="entry_img_{{ item.id }}" img_url="/entry/static/{{ item.id }}" class="async_div">
                        </div>

                        <!--<div class="post-title">-->
                            <!--<a href="" rel="bookmark" title="Permanent Link to 第二篇">第二篇</a>-->
                            <!--<p>{{ item.remark }}</p>-->
                            <!--</div>-->

                        <div class="entry">
                            <p><a href="#" onclick="post_up({{ item.id }});return false;"><img title="" src="/static/images/my/hand.png" width="50" style="border-top-width: 0px; display: inline; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" alt="1" border="0" /></a></p>
                            <p id="up_num_{{ item.id }}">{{ item.up_num }}</p>
                        </div>
                    </div>
                </div>
                {% endfor %}

                <div class="panel" id="nav-panel">
                    <div class="wrapper">
                        <img src="/static/images/where.jpg" alt="" width="940" height="600" />
                        <div class="post-title">
                            没有下一张啦
                        </div>
                    </div>
                </div>

            </div><!-- .panelContainer -->
        </div><!--.stripViewer -->

    </div><!-- .mid -->

    <div class="stripNavL" id="stripNavL0"><a href="#"><img src="/static/images/left.png" alt="Left" /></a></div>
    <div class="stripNavR" id="stripNavR0"><a href="#"><img src="/static/images/right.png" alt="Right" /></a></div>

{% endblock %}
